

<template>
   <div class="plans_main">
        <div class="plans_container ">
          <div v-for="(item,index) in plansList"  v-bind:key="index"
               :class="'plans_title' + (value === item.version_type ? ' plans_title_active' : '')"
               @click="selectVersionType(index,item)">

            <h2>{{item.version_type}}</h2>
            <p>{{item.title}}</p>
          </div>

        </div>

        <div class="plans_content" >
           <div class="plans_content_box" style="min-height: 400px">
             <div class="plans_qy_title">会员权益</div>
             <div class="plans_qy_content">
               <p v-for="(item,index) in additional_info"  v-bind:key="index">{{item}}</p>
             </div>
           </div>

          <div>
            <div class="plans_content_box" style="height: 75%;">
              <div class="plans_content_title" >购买会员</div>
              <div class="plans_content_radio_box">


                <div v-for="(item,index) in plansContent"  v-bind:key="index"
                     :class="'plans_content_radio' + (plansContentValue === index ? ' plans_content_radio_active' : '') "
                     @click="selectDuration(index,item)"
                >
                  <p class="plans_sc">{{item.duration}}个月</p>
                  <p class="plans_sj">￥{{item.price}}</p>
                  <p class="plans_yj">原价￥{{item.hx_price}}</p>
                </div>
              </div>
              <div style="margin-top: 20px;margin-left: 20px;">*会员购买所赠送的蓝豆在会员周期内有效，蓝豆不足时可充值</div>
            </div>
            <div class="plans_content_box" style="align-items: center;padding: 20px;height: 20%;margin-top: 20px;display: flex;justify-content: space-between">
              <div style="color: #C8B992FF;">
                <h2 style="font-size: 18px;">支付订单</h2>
                <p style="font-size: 12px">支付成功后可在个人中心/我的订单中查看</p>
              </div>
              <div>
                <t-button shape="round" theme="default" style="background-color: #C8B992FF;color: #605B50FF;" @click="pay" >立即支付</t-button>
              </div>
            </div>
          </div>
        </div>
   </div>

  <t-dialog
      v-model:visible="isDialogPay"
      header="订单支付"
      width="50%"
      :footer="false"
      placement="center"
  >
    <!-- 通过 props 传递参数 -->
    <OrderPay v-if="isDialogPay" :item="plans" @close="closeDrawer" />
  </t-dialog>

</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";
import OrderPay from "./OrderPay.vue";
const value = ref("");
const plansContentValue = ref(0);
const plansList = ref([]);
const plansContent = ref([]);
const additional_info = ref("");
const isDialogPay = ref(false);
const plans = ref(null);
const selectDuration = (index,item) => {
  console.log(item)
  plansContentValue.value = index
  additional_info.value = item.additional_info
}

const pay = () => {
  isDialogPay.value = true
  plans.value ={
    id:plansContent.value[plansContentValue.value].id,
    type:1
  }
}

const closeDrawer = () => {
  isDialogPay.value = false;
  plans.value = null
  //刷新页面
  setTimeout(() => {
    window.location.reload()
  },1000)
};

get(config.getPlansList,  {}).then(res => {
  console.log(res.data)
  plansList.value = res.data.data
  value.value = plansList.value[0].version_type
  plansContent.value = plansList.value[0].list
  additional_info.value  =  plansContent.value[0].additional_info
})
const selectVersionType = (index,item) => {
  value.value = item.version_type
  plansContent.value = item.list
  plansContentValue.value = 0
  additional_info.value  =  plansContent.value[0].additional_info
}



</script>
<style scoped>


.plans_container {
  display: flex;
  gap: 10px; /* 元素间距 */
}
.plans_title{
  flex: 1; /* 平均分配宽度 */
  min-width: 0; /* 防止内容溢出 */
  border-radius: 10px 10px 0px 0px;
  background-color: rgba(95,95,95,1);
  line-height: 1.8;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}
.plans_title:hover{
  background: linear-gradient(92.96deg, rgba(119,109,91,1) 3.58%,rgba(200,185,146,1) 77.77%);
  box-shadow: 0px 2px 6px 0px rgba(42,42,40,1);
  border: 1px solid rgba(255,255,255,0.3);
}
.plans_title_active{
  background: linear-gradient(92.96deg, rgba(119,109,91,1) 3.58%,rgba(200,185,146,1) 77.77%);
  box-shadow: 0px 2px 6px 0px rgba(42,42,40,1);
  border: 1px solid rgba(255,255,255,0.3);
}
.plans_title h2{
  color: rgba(233,232,230,1);
  font-size: 22px;
}
.plans_title  p{
  color: rgba(233,232,230,1);
  font-size: 14px;
}
.plans_content{
  padding: 20px 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 3fr;
}
.plans_content_box{
  border-radius: 10px;
  background-color: rgba(53,53,53,1);
}
.plans_qy_title{
  color: rgba(200,185,146,1);
  font-size: 18px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(69,69,69,1);
  text-align: center;
}
.plans_qy_content{
  color: rgba(185,185,185,1);
  font-size: 14px;
  padding: 10px 20px;
  line-height: 1.8;
}
.plans_content_title{
  color: rgba(200,185,146,1);
  font-size: 22px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  padding-left: 20px;
}
.plans_content_radio_box{
  display: flex;
  padding: 10px 20px;
  justify-content: space-around;
}
.plans_content_radio{

  border-radius: 10px;
  border: 1px solid rgba(69,69,69,1);
  text-align: center;
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-around; /* 子元素等间距分布 */
  align-items: center; /* 子元素水平居中 */
  cursor: pointer;
  height: 170px;

}
.plans_content_radio:hover{
  background-color: rgba(200,185,146,0.08);
  border: 1px solid rgba(200,185,146,1);
  color: rgba(200,185,146,1);
}
.plans_content_radio_active{
  background-color: rgba(200,185,146,0.08);
  border: 1px solid rgba(200,185,146,1);
  color: rgba(200,185,146,1);
}
.plans_sc{
  font-size: 20px;
}
.plans_sj{
  font-size: 30px;
}
.plans_yj{
  font-size: 14px;
  text-decoration: line-through;
}

</style>
